<template>
  <div style="display: flex; align-items: center; padding: 4px 0; min-height: 32px;">
    <i :class="getFileIcon(item)" style="font-size: 14px; color: #409eff; margin-right: 6px;"></i>
    <span style="font-weight: 500; margin-right: 8px; color: #303133;">{{ item.name }}</span>
    <el-tag size="mini" :type="item.isDirectory ? 'primary' : 'success'" style="margin-right: 8px;">
      {{ item.isDirectory ? '文件夹' : '文件' }}
    </el-tag>
    <span v-if="item.size && item.size !== '-'" style="font-size: 12px; color: #909399; margin-right: 8px;">
      {{ item.size }}
    </span>
    <span v-if="item.lastModified" style="font-size: 12px; color: #909399; margin-right: 8px;">
      {{ item.lastModified }}
    </span>
    <el-button 
      v-if="!item.isDirectory"
      size="mini" 
      type="text"
      @click="$emit('download', item)">
      <i class="el-icon-download"></i>
    </el-button>
  </div>
</template>

<script>
export default {
  name: "TreeNodeItem",
  props: {
    item: {
      type: Object,
      required: true
    },
    serverIp: {
      type: String,
      required: true
    }
  },
  methods: {
    getFileIcon(item) {
      if (item.isDirectory) {
        return 'el-icon-folder';
      }
      const ext = item.name.split('.').pop().toLowerCase();
      const iconMap = {
        'txt': 'el-icon-document',
        'pdf': 'el-icon-document',
        'doc': 'el-icon-document',
        'docx': 'el-icon-document',
        'jpg': 'el-icon-picture',
        'jpeg': 'el-icon-picture',
        'png': 'el-icon-picture',
        'gif': 'el-icon-picture',
        'mp4': 'el-icon-video-camera',
        'avi': 'el-icon-video-camera',
        'mp3': 'el-icon-headset',
        'wav': 'el-icon-headset',
        'zip': 'el-icon-box',
        'rar': 'el-icon-box',
        'js': 'el-icon-document',
        'html': 'el-icon-document',
        'css': 'el-icon-document',
        'java': 'el-icon-document',
        'py': 'el-icon-document'
      };
      return iconMap[ext] || 'el-icon-document';
    }
  }
}
</script>

<style scoped lang="scss">
</style>